<template>
  <div class="tree">
    <!-- 图层目录树 -->
    <h2 v-show="isShow">图层目录</h2>
    <div class="main">
      <el-tree
        class="tree-container"
        :data="layerData"
        show-checkbox
        node-key="id"
        :default-expanded-keys="['一级节点', '二级节点', '三级节点']"
        :default-checked-keys="layersid"
        :props="defaultProps"
        @check="handleCheck"
        v-show="isShow"
      >
        <!-- 自定义节点内容 -->
        <template #default="{ data }">
          <span class="tree-node">
            <span :class="data.icon"></span>
            <span>{{ data.label }}</span>
          </span>
        </template>
      </el-tree>
      <div
        class="slider"
        @click="handleClick"
        :class="isShow ? 'expand' : 'collapse'"
      >
        &nbsp;》
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from "vue";
import { getDocInfo } from "@/api/mapgis-api/index";

let docLayer;
const { proxy } = getCurrentInstance();
/* 加载地图文档 */

// 所有图层
const layersid = ref([]);
onMounted(async () => {
  //获取地图实例
  const map = proxy.$map;
  docLayer = proxy.$docLayer;
  //console.log(map);
  //加载地图文档
  map.addLayer(docLayer);
  /* 获取文档信息 */
  const docInfo = await getDocInfo("guanggu");
  //console.log(docInfo.value);
  layersid.value = docInfo.value.map((item) => item.LayerIndex);
  //console.log(layersid);
  /* 默认不加载所有图层 */
  docLayer.setLayerStatus(layersid.value, "include");
  success(docInfo);
});
/* 图层目录数据 */
const layerData = ref([]);
const success = (docInfo) => {
  //得到完整目录树数据
  const childrenData = docInfo.value.map((item) => {
    return {
      id: item.LayerIndex,
      label: item.Name,
      icon: getIconByGeomType(item.GeomType), // 根据 GeomType 获取相应的图标
    };
  });
  /* 目录树结构 */
  layerData.value = [
    {
      id: "一级节点",
      label: "地图文档",
      icon: "icon-doc",
      disabled: true,
      children: [
        {
          id: "二级节点",
          label: "光谷智慧交通",
          icon: "icon-doc",
          children: [
            {
              id: "三级节点",
              label: "新地图1",
              icon: "icon-map",
              children: childrenData,
            },
          ],
        },
      ],
    },
  ];
};
//修改默认属性
const defaultProps = {
  children: "children",
  label: "label", // 节点标签
  icon: "icon", // 节点图标
  disabled: "disabled", // 节点是否禁用
};
// 图标映射函数，根据 GeomType 返回对应的图标类名
const getIconByGeomType = (geomType) => {
  switch (geomType) {
    case "Pnt":
      return "icon-point";
    case "Lin":
      return "icon-line";
    case "Reg":
      return "icon-polygon";
    default:
      return "icon-point";
  }
};
/* 控制图层目录显隐 */
const isShow = ref(false);
const handleClick = () => {
  const slider = document.querySelector(".slider");
  slider.innerHTML = isShow.value ? "&nbsp;》" : "《";
  isShow.value = !isShow.value;
};
/* 处理复选框选择变化 */
const handleCheck = (data, checked) => {
  docLayer.setLayerStatus(
    data.id,
    checked.checkedKeys.includes(data.id) ? "include" : "exclude"
  );
  /* 如果选中了父节点，则选中所有子节点 */
  if (!layersid.value.includes(data.id)) {
    docLayer.setLayerStatus(
      layersid.value,
      checked.checkedKeys.includes(data.id) ? "include" : "exclude"
    );
  }
};
</script>

<style scoped>
.tree {
  position: fixed;
  top: 70px;
  height: 100%;
}
.main {
  height: 100%;
  display: flex;
}
h2 {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 15px;
  font-size: 16px;
  font-weight: bold;
  color: white;
  background-color: rgb(33, 150, 243);
  border-radius: 0 15px 0 0;
}
.expand {
  position: absolute;
  top: 40%;
  right: 0;
  width: 20px;
  height: 50px;
  line-height: 50px;
  color: white;
  background-color: rgb(204, 204, 204);
  border-radius: 5px 0 0 5px;
  cursor: pointer;
}
.collapse {
  position: absolute;
  top: 40%;
  left: 0;
  width: 20px;
  height: 50px;
  line-height: 50px;
  color: white;
  background-color: rgb(204, 204, 204);
  border-radius: 0 5px 5px 0;
  cursor: pointer;
}
.main .tree-container {
  opacity: 0.8;
  height: 80%;
  padding-right: 30px;
  border-radius: 0 0 15px 0;
}
.icon-point,
.icon-line,
.icon-polygon,
.icon-map,
.icon-doc {
  width: 17px;
  height: 16px;
  /* margin-right: 8px; */
  /* 行内块才有高度 */
  display: inline-block;
}
.icon-point {
  background-image: url("../src/images/点.png");
}
.icon-line {
  background-image: url("../src/images/线.png");
}
.icon-polygon {
  background-image: url("../src/images/面.png");
}
.icon-default {
  background-image: url("../src/images/点.png");
}
.icon-doc {
  background-image: url("../src/images/文档.png");
}
.icon-map {
  background-image: url("../src/images/地图.png");
}
</style>
